<template>
		<div id="boxx">
        <article class="atc">
            <p>配送信息</p>
            <p><span>蜂鸟专送</span>约35分钟送达，距离1.6km</p>
            <p>配送费￥5</p>
        </article>
        <div class="hd">
            <h3>活动与服务</h3>
            <p><span>首</span>新用户下单立减17快</p>
            <p><span>首</span>新用户下单立减17快</p>
            <p><span>首</span>新用户下单立减17快</p>
            <p><span>首</span>新用户下单立减17快</p>
            <p><span>首</span>新用户下单立减17快</p>
            <p><span>首</span>新用户下单立减17快</p>
        </div>
        <div class="hd">
            <h3>活动与服务</h3>
            <div>
                <img src="static/img/17.webp"/>
                <img src="static/img/18.webp"/>
            </div>
        </div>
        <hr>
    </div>
</template>

<script>
export default {
		data() {
			return {

			}
		},
		methods: {
			//事件
			
		},
		mounted(){
			//原生js
			
		}
	}
</script>

<style scoped lang="less">
  .px2rem(@name, @px){
    @{name}: @px / 37.5 * 1rem;
  }
  #boxx{
    background: rgb(245,245,245);
}
.atc{
    .px2rem(height,96);
    display: flex;
    flex-direction:column;
    background: #fff;
    .px2rem(padding,12);
    .px2rem(margin-bottom,12);
    box-sizing: border-box;
    p:first-child{
        .px2rem(font-size,15);
        font-weight:bold;
        .px2rem(margin-left,10);
    }
    p:nth-child(2){
        .px2rem(margin,10);
        span{
            background:rgb(0,151,255);
            .px2rem(margin-right,10);
            color:#fff;
            .px2rem(padding,5);
            border-radius:5%;
        }
    }
    p:last-child{
        .px2rem(margin-left,10)
    }
}
.hd{
    .px2rem(margin-bottom,12);
    .px2rem(padding,10);
    background:#fff;
    &>div{
        img{
            .px2rem(height,80);
            .px2rem(width,80);
            .px2rem(margin-right,8);
        }
    }
    h3{
        font-weight:bold;
        .px2rem(font-size,15);
        .px2rem(margin-top,10);
        .px2rem(margin-bottom,20);
    }
    p{
        .px2rem(line-height,18);
        span{
            .px2rem(padding,1);
            color:#fff;
            .px2rem(margin-right,5);
            background:limegreen;
            border-radius:5%;
        }
    }
}
  
</style>
